<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">

            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="课程名称：" prop="title">
                    <el-input v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="授课教师：" prop="teacher_id">
                    <div flex="cross:center">
                        <el-select v-model="ruleForm.teacher_id" filterable placeholder="请选择" disabled>
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in teacherArr"
                                :key="index"></el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item label="授课院系：" prop="department">
                    <el-select v-model="ruleForm.department" placeholder="请选择" @change="chooseClass()">
                        <el-option :label="item.department" :value="item.id" v-for="(item, index) in departmentList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授课班级：" prop="classes1">
                    <el-select v-model="ruleForm.classes1" filterable placeholder="请选择/输入">
                        <el-option :label="item.class_title" :value="item.id" v-for="(item, index) in classesList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择模板：" prop="">
                    <el-select v-model="ruleForm.template_ids" filterable multiple placeholder="请选择/输入"
                        @change='getTemId()'>
                        <el-option :label="item.template_title" :value="item.id" v-for="(item, index) in mubanArr"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        Create
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { DepartmentListtype } from '../../../type/login';
import userMainStore from "../../../store/modules/app";
const mainStore = userMainStore();
import { teacherList, departmentDepartmentList, departmentClassesList, templateList } from '../../../request/api'
const teacherArr = ref([] as any[])
let departmentList = ref([] as any[]) //as any[] 这样不报红
let classesList = ref([] as any[])
let mubanArr = ref([] as any[])
interface RuleForm {
    title: string
    teacher_id: string
    department: string
    classes1: string,
    template_ids: any

}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
    title: '',
    teacher_id: '',
    department: '',
    classes1: '',
    template_ids: []

})

const rules = reactive({
    title: [
        { required: true, message: '请输入课程名称', trigger: 'blur' },
    ],
    teacher_id: [
        {
            required: true,
            message: '请选择教师',
            trigger: 'change',
        },
    ],
    department: [
        {
            required: true,
            message: '请选择院系',
            trigger: 'change',
        },
    ],
    classes1: [
        {
            required: true,
            message: '请选择班级',
            trigger: 'change',
        },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // formEl.resetFields()
    ruleForm.title = ''
    // ruleForm.teacher_id = ''
    ruleForm.department = ''
    ruleForm.classes1 = ''
    ruleForm.template_ids = []
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {

    done()

}
const department = () => {
    let params: DepartmentListtype = {
        token: mainStore.Authorization,
        limit: 1000,
        page: 1

    };
    departmentDepartmentList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            departmentList.value = data.list


        }
    });
}
const chooseClass = () => {

    classesList.value = []
    ruleForm.classes1 = ''

    classes()

}
const classes = () => {
    let params = {
        token: mainStore.Authorization,
        limit: 1000,
        department: ruleForm.department

    };
    departmentClassesList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            classesList.value = data.list
        }
    });
}

const getTeacherList = () => {
    let params = {
        token: mainStore.Authorization,
        page: 1,
        limit: 1000
    }
    teacherList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            teacherArr.value = data.list;
        }
    })
}
const gettemplate = () => {
    let params = {
        token: mainStore.Authorization,
        page: 1,
        limit: 1000
    }
    templateList(params).then((res) => {
        let { data, code } = res;
        if (code == 200) {
            mubanArr.value = data.list;
        }
    });
}
const getTemId = () => {
    console.log(ruleForm.template_ids, 'ids')
}
const props = defineProps({
    title: {
        default: '',
        type: String
    }
})
const showDio1 = (val, row) => {

    department()
    gettemplate()
    if (val == 'edit') {

        // 编辑回写 类型判断错误  数组里面的值是字符类型 使用.map(Number)将数组全部转化成数字类型

        ruleForm.title = row.title
        ruleForm.teacher_id = row.teacher_id
        ruleForm.department = row.department_id
        classes()
        ruleForm.classes1 = row.classes_id

        let template_id = row.template_id.split(',')
        let xx = template_id.map(Number)
        ruleForm.template_ids = xx.length > 0 ? xx : []


    }
    dialogVisible.value = true
}
defineExpose({
    showDio1
})
onMounted(() => {
    getTeacherList()
    let loginInfo = localStorage.getItem('loginInfo') ? JSON.parse(localStorage.getItem('loginInfo') as string).id : ''
    ruleForm.teacher_id = loginInfo

})
</script>

<style scoped></style>